<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->

    <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">
      <a-row :gutter="[12,12]">
        <a-col :span="12">
          <a-form-item label="管家代码" field="code" >
            <a-input v-model="formState.code" placeholder="请填写管家代码" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="管家名称" field="name" >
            <a-input v-model="formState.name" placeholder="请填写管家名称"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="所属场地" field="site" >
            <smart-dict v-model="formState.site.code" placeholder="请填写所属场地" :url="ProductOptions.BasicPlaceOptions" />
          </a-form-item>
        </a-col>



        <a-col :span="12">
          <a-form-item label="管家登录手机号" field="phone" >
            <a-input v-model="formState.phone" placeholder="请填写管家登录手机号"/>
          </a-form-item>
        </a-col>

        <a-col v-if="!isUpdate" :span="12">
          <a-form-item label="管家密码" field="password" >
            <a-input-password  v-model="formState.password" placeholder="请填写管家密码"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="管家状态" field="status" >
            <smart-dict v-model="formState.status" placeholder="请填写管家状态" :url="DictOptions.StaffStatus" />
          </a-form-item>
        </a-col>

<!--        <a-col :span="12">-->
<!--          <a-form-item label="是否是管理员" field="isManage">-->
<!--            <a-radio-group v-model="formState.isManage"  >-->
<!--              <a-radio :value="false">否</a-radio>-->
<!--              <a-radio :value="true">是</a-radio>-->
<!--            </a-radio-group>-->
<!--          </a-form-item>-->
<!--        </a-col>-->

        <a-col :span="12">
          <a-form-item :label="`显示排序值 [ ${formState.sort} ]` " field="sort" tooltip="升序排序 显示值越小 显示越靠前">
            <a-slider v-model="formState.sort"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>


import {EditDrawer} from '@/libs/core'
import {STAFF_EDIT,} from "@/pages/modules/work/resource/form";
import {WorkHttp} from '@/pages/modules/work/resource/http'
import {DictOptions, ProductOptions} from "@/libs/options";


const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const {BODY, RULES} = STAFF_EDIT

const {addStaff, updateStaff} = WorkHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}
const service = new EditDrawer(config).setAddRequest(addStaff).setUpdateRequest(updateStaff)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改管家' : '新增管家'


</script>
